import { Card, Button, Modal, Form, Input, Select, message, List, Avatar } from 'antd'
import type { CommentProps } from 'antd/es/comment'
import { PlusOutlined, MessageOutlined, RobotOutlined } from '@ant-design/icons'
import { useState } from 'react'

const { TextArea } = Input
const { Option } = Select

export default function ClanRules() {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [aiModalVisible, setAiModalVisible] = useState(false)
  const [form] = Form.useForm()

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
    form.resetFields()
  }

  const handleOk = async (values: any) => {
    try {
      // TODO: 实现添加模板逻辑
      console.log('添加模板:', values)
      message.success('模板添加成功')
      setIsModalVisible(false)
      form.resetFields()
    } catch (error) {
      message.error('添加模板失败')
    }
  }

  const mockTemplates = [
    {
      id: 1,
      title: '春节家宴活动',
      content: '每年春节举行家族聚会，全体成员参与，分享过去一年的收获和未来的规划。',
      type: 'activity',
      createdBy: '管理员',
      createdAt: '2024-01-01'
    },
    {
      id: 2,
      title: '家族基本准则',
      content: '家族成员应互相尊重，团结友爱，共同维护家族荣誉和传统。',
      type: 'rule',
      createdBy: '管理员',
      createdAt: '2024-01-02'
    }
  ]

  const mockComments = [
    {
      id: 1,
      author: '张三',
      content: '这个模板很好，建议每年都要举行春节家宴。',
      time: '2024-01-03 10:30'
    },
    {
      id: 2,
      author: '李四',
      content: '同意，我觉得还可以增加一些传统活动。',
      time: '2024-01-03 11:15',
      children: [
        {
          id: 3,
          author: '张三',
          content: '好建议，我们可以考虑加入舞龙舞狮等传统节目。',
          time: '2024-01-03 11:30'
        }
      ]
    }
  ]

  return (
    <div>
      <Card
        title="族规模本"
        extra={
          <div style={{ display: 'flex', gap: '8px' }}>
            <Button icon={<RobotOutlined />} onClick={() => setAiModalVisible(true)}>
              AI助手
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
              添加模板
            </Button>
          </div>
        }
        style={{ marginBottom: 16 }}
      >
        <List
          itemLayout="vertical"
          dataSource={mockTemplates}
          renderItem={(item) => (
            <List.Item
              key={item.id}
              extra={
                <div>
                  <div style={{ color: '#999', fontSize: '12px' }}>
                    创建者: {item.createdBy}
                  </div>
                  <div style={{ color: '#999', fontSize: '12px' }}>
                    创建时间: {item.createdAt}
                  </div>
                  <div style={{ color: '#999', fontSize: '12px', marginTop: '4px' }}>
                    类型: {item.type === 'activity' ? '活动' : item.type === 'rule' ? '族规' : item.type === 'meeting' ? '会议' : '场所'}
                  </div>
                </div>
              }
            >
              <List.Item.Meta
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <span>{item.title}</span>
                    <Button type="link" icon={<MessageOutlined />} size="small">
                      评论
                    </Button>
                  </div>
                }
                description={item.content}
              />
              
              <div style={{ marginTop: '16px', borderTop: '1px solid #f0f0f0', paddingTop: '16px' }}>
                <h4>评论</h4>
                {mockComments.map((comment) => (
                  <div key={comment.id} style={{ marginBottom: '16px', padding: '12px', backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
                      <Avatar>{comment.author[0]}</Avatar>
                      <div>
                        <div style={{ fontWeight: 'bold' }}>{comment.author}</div>
                        <div style={{ fontSize: '12px', color: '#999' }}>{comment.time}</div>
                      </div>
                    </div>
                    <p>{comment.content}</p>
                    
                    {comment.children?.map((child) => (
                      <div key={child.id} style={{ marginLeft: '40px', marginTop: '8px', padding: '8px', backgroundColor: '#f0f0f0', borderRadius: '6px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
                          <Avatar size="small">{child.author[0]}</Avatar>
                          <div style={{ fontSize: '14px', fontWeight: 'bold' }}>{child.author}</div>
                          <div style={{ fontSize: '12px', color: '#999' }}>{child.time}</div>
                        </div>
                        <p style={{ fontSize: '14px' }}>{child.content}</p>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            </List.Item>
          )}
        />
      </Card>

      <Modal
        title="添加模板"
        open={isModalVisible}
        onOk={form.submit}
        onCancel={handleCancel}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleOk}
        >
          <Form.Item
            name="title"
            label="模板标题"
            rules={[{ required: true, message: '请输入模板标题' }]}
          >
            <Input placeholder="请输入模板标题" />
          </Form.Item>

          <Form.Item
            name="content"
            label="模板内容"
            rules={[{ required: true, message: '请输入模板内容' }]}
          >
            <TextArea rows={6} placeholder="请输入模板内容" />
          </Form.Item>

          <Form.Item
            name="template_type"
            label="模板类型"
            rules={[{ required: true, message: '请选择模板类型' }]}
          >
            <Select placeholder="请选择模板类型">
              <Option value="activity">活动</Option>
              <Option value="rule">族规</Option>
              <Option value="meeting">会议</Option>
              <Option value="venue">场所</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="AI智能助手"
        open={aiModalVisible}
        onCancel={() => setAiModalVisible(false)}
        footer={null}
        width={800}
      >
        <div style={{ height: '400px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ flex: 1, border: '1px solid #d9d9d9', borderRadius: '4px', padding: '16px', marginBottom: '16px', overflowY: 'auto' }}>
            <div style={{ textAlign: 'center', color: '#999', padding: '40px' }}>
              <RobotOutlined style={{ fontSize: 48, marginBottom: '16px' }} />
              <p>AI助手可以帮助您：</p>
              <p>• 生成活动模板</p>
              <p>• 制定族规模板</p>
              <p>• 场景化对话</p>
              <p>• 内容优化建议</p>
            </div>
          </div>
          
          <div style={{ display: 'flex', gap: '8px' }}>
            <Input.TextArea
              placeholder="请输入您的问题或需求..."
              rows={2}
              style={{ flex: 1 }}
            />
            <Button type="primary">发送</Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}